<template>
    <div class="postloane">
        <div class="neirong">
            <div class="dengj">
                <div class="bisoti">催收管理</div>
                <table cellpadding="10" cellspacing="0" class="color">
                        <div class="trtitle">新增催收</div>
                    <tr class="width">
                        <td>催收时间</td>
                        <td><input class="input"/></td>
                        <td>催收方式</td>
                        <td>
                            <el-select v-model="value" class="m-2" placeholder="请选择" size="large">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            />
                        </el-select>
                        </td>
                       
                    </tr>
                    <tr>
                        <td>催收内容</td>
                        <td colspan="3">
                            <input v-model="input" placeholder="请输入内容" id="cuisho" />
                        </td>
                       
                        
                    </tr>
                </table>
               
                <div class="kuang">
                    <div class="fanhui" @click="fanhui"><el-icon><ArrowLeft /></el-icon>返回</div>
                    <el-button type="primary" plain class="anniu">保存</el-button>
                    <el-button type="primary"  class="anniu">提交</el-button>
                </div>
                
            </div>
           
        </div>
    </div>
</template>

<script setup>
import {ref} from 'vue'
import { useRouter } from 'vue-router';
var router = useRouter();

const value = ref('')

const options = [
  {
    value: '电话催收你',
    label: '电话催收你',
  },
  {
    value: '上门催收你',
    label: '上门催收你',
  },
]

// 返回
var fanhui=()=>{
    router.go(-1)
}
</script>

<style scoped>
.title {
    width: 200px;
    height: 40px;
    background-color: aqua;
    text-align: center;
    line-height: 40px;
    color: white;
    font-size: 20px;
    font-weight: bold;
    border-radius: 30px;

}
.color tr{
    border: 1px solid #ebeef5;
}
.color tr td{
    border: 1px solid #ebeef5;
}
.trtitle{
    padding: 20px;
}
.width td {
    width: 300px;
    border: 1px solid #ebeef5;
}
.width .m-2 {
    width: 300px;
    border: 1px solid #ebeef5;
   
}
.color tr td .input{
    width: 300px;
    height: 30px;
    border: 0;
   outline:none;

}
.color #cuisho{
    width: 900px;
    height: 120px;
    border: 0;
    outline:none;

}
.neirong {
    height: 100%;
    width: 100%;
    background-color: azure;
}
.bisoti{
    padding: 20px 0px ;
    font-size: 20px;
    font-weight: bold;
}
.dengj {
    height:556px;
    width: 100%;
    background-color: white;
    margin-left: 20px;
}
.fanhui{
    width: 80px;
    height: 40px;
    border: 1px solid #d2d3d6;
    color: #616263;
    text-align: center;
    line-height: 40px;
    
}
.kuang{
    width: 400px;
    height: 40px;
    float: right;
 
    margin: 200px 50px 0px 0px;
    display: flex;
    justify-content: space-between;
    
}
.kuang .anniu{
    width: 80px;
    height: 40px;
}

</style>
